<template>
  <Result status="success" title="更改密码成功" :sub-title="getSubTitle">
    <template #extra>
      <a-button key="console" type="primary" @click="finish"> 返回登录 </a-button>
    </template>
  </Result>
</template>
<script lang="ts">
  import { defineComponent, ref, computed, unref, onMounted, watchEffect, watch } from "vue"
  import { Form, Input, Button, Result } from "ant-design-vue"
  import { useI18n } from "/@/hooks/web/useI18n"
  // import { useLoginState } from "../login/useLogin"
  import { useCountdown } from "/@/components/CountDown/src/useCountdown"
  import { propTypes } from "/@/utils/propTypes"

  export default defineComponent({
    name: "Step3",
    components: {
      Button,
      Form,
      FormItem: Form.Item,
      Input,
      Result,
    },
    props: {
      accountInfo: {
        type: Object,
        default: () => ({}),
      },
      count: propTypes.number.def(5),
    },
    emits: ["finish"],
    setup(props, { emit }) {
      const { t } = useI18n()
      const { accountInfo } = props
      // const { handleBackLogin } = useLoginState()

      const { currentCount, start } = useCountdown(props.count)
      const getSubTitle = computed(() => {
        return t("sys.login.subTitleText", [unref(currentCount)])
      })
      /**
       * 倒计时
       */
      watchEffect(() => {
        if (unref(currentCount) === 1) {
          setTimeout(() => {
            finish()
          }, 500)
        }
      })

      /**
       * 结束回调
       */
      function finish() {
        // handleBackLogin()
        emit("finish")
      }

      onMounted(() => {
        start()
      })

      return {
        getSubTitle,
        finish,
      }
    },
  })
</script>
